<!-- pages/ProductList.vue -->
<template>
  <div class="product-list-page">
    <ResponsiveGrid 
      :rows="3"
      :item-min-width="240"
      :gap="20"
      :config="customConfig"
      ref="gridLayoutRef"
    >
      <template #default="{ itemsPerRow, pageSize, currentBreakpoint }">
      
        
        <!-- 产品列表 -->
        <div class="product-grid">
          <div 
            v-for="product in displayedProducts" 
            :key="product.id"
            class="product-item"
          >
            <img :src="product.image" :alt="product.name" />
            <h3>{{ product.name }}</h3>
            <p class="price">¥{{ product.price }}</p>
          </div>
        </div>
        
        <!-- 分页 -->
        <div class="pagination">
          <button 
            v-for="page in totalPages" 
            :key="page"
            :class="{ active: currentPage === page }"
            @click="handlePageChange(page)"
          >
            {{ page }}
          </button>
        </div>
      </template>
    </ResponsiveGrid>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import ResponsiveGrid from './components/ResponsiveGrid.vue'

interface Product {
  id: number
  name: string
  price: number
  image: string
}

// 自定义配置（针对1440和1920像素优化）
const customConfig = {
  itemsPerRow: {
    xs: 1,
    sm: 2,
    md: 3,
    lg: 4,
    xl: 5,
    xxl: 6, // 1440px 显示6个
    xxxl: 8  // 1920px 显示8个
  }
}

const gridLayoutRef = ref<InstanceType<typeof ResponsiveGrid> | null>(null)
const currentPage = ref(1)
const allProducts = ref<Product[]>([])

// 模拟产品数据
const generateProducts = (count: number): Product[] => {
  return Array.from({ length: count }, (_, i) => ({
    id: i + 1,
    name: `产品 ${i + 1}`,
    price: Math.floor(Math.random() * 1000) + 100,
    image: `https://picsum.photos/200/200?random=${i + 1}`
  }))
}

// 计算当前显示的产品
const displayedProducts = computed(() => {
  const pageSize = gridLayoutRef.value?.pageSize || 15
  const startIndex = (currentPage.value - 1) * pageSize
  const endIndex = startIndex + pageSize
  return allProducts.value.slice(startIndex, endIndex)
})

// 计算总页数
const totalPages = computed(() => {
  const pageSize = gridLayoutRef.value?.pageSize || 15
  return Math.ceil(allProducts.value.length / pageSize)
})

// 处理页面变化
const handlePageChange = (page: number) => {
  currentPage.value = page
}

// 监听页面大小变化，重置到第一页
watch(() => gridLayoutRef.value?.pageSize, () => {
  currentPage.value = 1
})

onMounted(async () => {
  // 模拟获取数据
  allProducts.value = generateProducts(100)
})
</script>

<style scoped>
.product-list-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.layout-info {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.product-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 20px;
}

.product-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  background: white;
}

.product-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 12px;
}

.product-item h3 {
  margin: 8px 0;
  font-size: 16px;
}

.price {
  color: #e53935;
  font-weight: bold;
  font-size: 18px;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.pagination button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
  border-radius: 4px;
}

.pagination button.active {
  background: #1976d2;
  color: white;
  border-color: #1976d2;
}
</style>